<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="author" content="二口丝连连二口，十八相与与十八">
    
    <meta name="description" content="一花一草一世界">
    
    
    
    
    
    
    <title>AngularJs+Bootstrap搭建首页导航路由 | Tlin Blog</title>
    <link href=”“ rel=”prefetch” />

    <link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/aos.css">
<link rel="stylesheet" href="/css/style.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/aos.js"></script>
    <script src="/js/highslide/highslide-full.min.js"></script>
    <link rel="stylesheet" href="/js/highslide/highslide.css">
    <style type="text/css">
        @media (max-width: 768px) {
            body {
                background-color: #f0f0f0;
                background: url('/imgs/xsbg.gif');
                background-attachment: fixed;
            }
        }
    </style>
    
    <!--<script type="text/javascript">
      if (document.images) {
        var avatar = new Image();
        avatar.src = '/imgs/avatar.jpg'
        var previews = 'preview1.jpg,preview2.jpg,preview3.jpg'.split(',')
        var previewsPreLoad = []
        for(var i = 0; i < length; i++) {
          previewsPreLoad.push(new Image())
          previewsPreLoad[previewsPreLoad.length - 1].src = '/imgs/preview' + previews[i]
        }
      }
    </script>-->
</head>
<body>
    <!-- 背景轮播图功能 -->
    <section class="hidden-xs">
    <ul class="cb-slideshow">
        <li><span>天若</span></li>
        <li><span>有情</span></li>
        <li><span>天亦老</span></li>
        <li><span>人间</span></li>
        <li><span>正道</span></li>
        <li><span>是沧桑</span></li>
    </ul>
</section>
    <!-- 欧尼酱功能, 谁用谁知道 -->
    
    <div class="gal-menu gal-dropdown">
    <div class="circle" id="gal">
        <div class="ring">
            <a href="/" class="menuItem" style="left: 50%; top: 15%;">首页</a>
            
            <a class="menuItem" style="left: 80.3109%; top: 32.5%;">下一页</a>
            
            <a href="/archives" class="menuItem" style="left: 80.3109%; top: 67.5%;">归档</a>
            <a href="javascript:window.location.reload()" class="menuItem" style="left: 50%; top: 85%;">刷新</a>
            <a href="/message" class="menuItem" style="left: 19.6891%; top: 67.5%;">留言板</a>
            
            <a class="menuItem" style="left: 19.6891%; top: 32.5%;">上一页</a>
            
            <a class="menuItem" style="left: 50%; top: 50%;">自动复制</a>
        </div>
        <!-- <audio id="audio" src="/imgs/oni.mp3"></audio> -->
    </div>
</div>
<script>
    // document.getElementById('copy').onclick=function(){
document.onmouseup=function(){
    var txt = window.getSelection?window.getSelection():document.selection.createRange().text;
    document.execCommand("Copy") 
}
    // }
</script>
    
    <header class="navbar navbar-inverse" id="gal-header">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target=".bs-navbar-collapse"
                    aria-expanded="false">
                <span class="fa fa-lg fa-reorder"></span>
            </button>
            <a href="/">
                
                <style>
                    #gal-header .navbar-brand {
                        height: 54px;
                        line-height: 24px;
                        font-size: 28px;
                        opacity: 1;
                        background-color: rgba(0,0,0,0);
                        text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #228DFF,0 0 35px #228DFF,0 0 40px #228DFF,0 0 50px #228DFF,0 0 75px #228DFF;
                    }
                </style>
                <!-- 这里使用文字(navbar_text or config.title) -->
                <div class="navbar-brand">Tlin</div>
                
            </a>
        </div>
        <div class="collapse navbar-collapse bs-navbar-collapse">
            <ul class="nav navbar-nav" id="menu-gal">
                
                
                <li class="">
                    <a href="/">
                        <i class="fa fa-home"></i>首页
                    </a>
                </li>
                
                
                
                <li class="">
                    <a href="/archives">
                        <i class="fa fa-archive"></i>归档
                    </a>
                </li>
                
                
                
                
                <li class="dropdown">
                    <!-- TODO 添加hover dropdown效果 -->
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false" data-hover="dropdown">
                        <i class="fa fa-list"></i>分类
                    </a>
                    <ul class="dropdown-menu">
                        
                        
                        <li>
                            <a href="/categories/音频-视频/">音频 视频</a>
                        </li>
                        
                        <li>
                            <a href="/categories/有趣小东西/">有趣小东西</a>
                        </li>
                        
                        <li>
                            <a href="/categories/hexo/">hexo</a>
                        </li>
                        
                        
                        <li>
                            <a href="/categories">...</a>
                        </li>
                        
                        
                    </ul>
                </li>
                
                
                
                
                
                <li class="dropdown">
                    <!-- TODO 添加hover dropdown效果 -->
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false" data-hover="dropdown">
                        <i class="fa fa-tags"></i>标签
                    </a>
                    <ul class="dropdown-menu">
                        
                        
                        <li>
                            <a href="/tags/audio-video/">audio video</a>
                        </li>
                        
                        <li>
                            <a href="/tags/funny/">funny</a>
                        </li>
                        
                        <li>
                            <a href="/tags/hexo/">hexo</a>
                        </li>
                        
                        
                        <li>
                            <a href="/tags">...</a>
                        </li>
                        
                        
                    </ul>
                </li>
                
                
                
                
                <li class="">
                    <a href="/about">
                        <i class="fa fa-user"></i>关于我
                    </a>
                </li>
                
                
                
                <li class="">
                    <a href="/message">
                        <i class="fa fa-heart"></i>留言板
                    </a>
                </li>
                
                
            </ul>
        </div>
    </div>
</header>
    <div id="gal-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 gal-right" id="mainstay">
                    
<article class="article well article-body" id="article">
    <div class="breadcrumb">
        <i class="fa fa-home"></i>
        <a href="/">Tlin Blog</a>
        >
        <span>AngularJs+Bootstrap搭建首页导航路由</span>
    </div>
    <!-- 大型设备详细文章 -->
    <div class="hidden-xs">
        <div class="title-article">
            <h1>
                <a href="/2019/03/05/web/angular/">AngularJs+Bootstrap搭建首页导航路由</a>
            </h1>
        </div>
        <div class="tag-article">
            
            <span class="label label-gal">
                <i class="fa fa-tags"></i>
                
                <a href="/tags/web/">web</a>
                
            </span>
            
            <span class="label label-gal">
                <i class="fa fa-calendar"></i> 2019-03-05
            </span>
            
        </div>
    </div>
    <!-- 小型设备详细文章 -->
    <div class="visible-xs">
        <center>
            <div class="title-article">
                <h4>
                    <a href="/2019/03/05/web/angular/">AngularJs+Bootstrap搭建首页导航路由</a>
                </h4>
            </div>
            <p>
                <i class="fa fa-calendar"></i> 2019-03-05
            </p>
            <p>
                
                <i class="fa fa-tags"></i>
                
                <a href="/tags/web/">web</a>
                
                
                
            </p>
        </center>
    </div>
    <div class="content-article">
        <h4 id="简单的介绍使用angular-js搭建网页的导航路由，外加bootstrap复制粘贴代码即可用。导航、页脚部分固定，中间的内容是变动的。"><a href="#简单的介绍使用angular-js搭建网页的导航路由，外加bootstrap复制粘贴代码即可用。导航、页脚部分固定，中间的内容是变动的。" class="headerlink" title="简单的介绍使用angular.js搭建网页的导航路由，外加bootstrap复制粘贴代码即可用。导航、页脚部分固定，中间的内容是变动的。"></a>简单的介绍使用angular.js搭建网页的导航路由，外加bootstrap复制粘贴代码即可用。导航、页脚部分固定，中间的内容是变动的。</h4><h4 id="点击查看效果"><a href="#点击查看效果" class="headerlink" title="点击查看效果"></a><a href="https://tianrenlin.github.io/angularjs_bootstrap/" target="_blank" rel="noopener">点击查看效果</a></h4><h4 id="值得注意："><a href="#值得注意：" class="headerlink" title="值得注意："></a>值得注意：</h4><p><strong>要想angularjs兼容包括IE8以上的版本，要用angularjs 1.3之前的版本，本项目是v1.2.9</strong><br><strong>jQuery要2.0之前的</strong><br><strong>bootstrap要3.x的</strong><br><strong>此外，该项目的资源在我的github <a href="https://github.com/tianrenlin/angularjs_bootstrap" target="_blank" rel="noopener">点击查看</a></strong><br><strong><a href="https://www.cnblogs.com/joyceshen/p/7891498.html" target="_blank" rel="noopener">一些关于该兼容性的博客</a></strong></p>
<h4 id="目录树"><a href="#目录树" class="headerlink" title="目录树 "></a>目录树 <img src="/images/web/tree.png" alt=""></h4><h5 id="1、导航部分"><a href="#1、导航部分" class="headerlink" title="1、导航部分"></a>1、导航部分</h5><ul>
<li><img src="/images/web/nav.png" alt=""><br>首先，必须设置 AngularJS 应用的根元素：<code>&lt;body ng-app=&quot;app&quot;&gt;</code></li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 头部导航 --&gt;</span><br><span class="line">	&lt;nav class=&quot;clear&quot;&gt;</span><br><span class="line">		&lt;div class=&quot;nav_count&quot;&gt;</span><br><span class="line">			&lt;div class=&quot;nav_left&quot;&gt;</span><br><span class="line">				&lt;a href=&quot;#/&quot;&gt;&lt;img src=&quot;img/logo.png&quot; alt=&quot;&quot; class=&quot;logo&quot;&gt;&lt;/a&gt;</span><br><span class="line">			&lt;/div&gt;</span><br><span class="line">		  	&lt;div class=&quot;nav_list&quot;&gt;</span><br><span class="line">			  	&lt;ul&gt;</span><br><span class="line">			  		&lt;li class=&quot;list_child&quot;&gt;&lt;a href=&quot;#/&quot;&gt;&lt;span&gt;•&lt;/span&gt;首页&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">				    &lt;li class=&quot;list_child&quot;&gt;&lt;a href=&quot;#/one&quot;&gt;&lt;span&gt;•&lt;/span&gt;导航1&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">				    &lt;li class=&quot;list_child&quot;&gt;&lt;a href=&quot;#/two&quot;&gt;&lt;span&gt;•&lt;/span&gt;导航2&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">				    &lt;li class=&quot;list_child&quot;&gt;&lt;a href=&quot;#/three&quot;&gt;&lt;span&gt;•&lt;/span&gt;导航3&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">				    &lt;li class=&quot;list_child&quot;&gt;&lt;a href=&quot;#/four&quot;&gt;&lt;span&gt;•&lt;/span&gt;导航4&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">				    &lt;li class=&quot;list_child&quot;&gt;&lt;a href=&quot;#/five&quot;&gt;&lt;span&gt;•&lt;/span&gt;导航5&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">			  	&lt;/ul&gt;</span><br><span class="line">			 &lt;/div&gt;</span><br><span class="line">			 &lt;div class=&quot;nav_right&quot;&gt;</span><br><span class="line">				  &lt;ul&gt;</span><br><span class="line">				  	&lt;li&gt;&lt;a href=&quot;javascript:&quot;&gt;登录&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">				  	&lt;li&gt;&lt;a href=&quot;javascript:&quot;&gt;注册&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">				  &lt;/ul&gt;</span><br><span class="line">			&lt;/div&gt;</span><br><span class="line">			&lt;div class=&quot;toggle clear&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-align-justify&quot;&gt;&lt;/i&gt;&lt;/div&gt;</span><br><span class="line">		&lt;/div&gt;</span><br><span class="line">	&lt;/nav&gt;</span><br></pre></td></tr></table></figure>
<p><code>&lt;a href=&quot;#/&quot;&gt;&lt;span&gt;•&lt;/span&gt;首页&lt;/a&gt;</code>是你要跳转的页面，当然，要保证你的这个页面存在才行。</p>
<h3 id="angularjs的路由配置"><a href="#angularjs的路由配置" class="headerlink" title="angularjs的路由配置"></a>angularjs的路由配置</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">angular.module(&apos;app&apos;, [&apos;ngRoute&apos;])  //&apos;app&apos;就是前面ng-app=&quot;app&quot;，使body成为angularjs的根元素</span><br><span class="line">.config( function ($routeProvider,$locationProvider) &#123;</span><br><span class="line">   </span><br><span class="line">    $routeProvider.</span><br><span class="line">    when(&apos;/&apos;, &#123; //刚打开项目时显示的页面</span><br><span class="line">        templateUrl: &apos;html/index.html&apos;</span><br><span class="line">    &#125;).</span><br><span class="line">    when(&apos;/one&apos;, &#123;</span><br><span class="line">        templateUrl: &apos;html/one.html&apos;</span><br><span class="line">    &#125;).</span><br><span class="line">    when(&apos;/two&apos;, &#123;</span><br><span class="line">        templateUrl: &apos;html/two.html&apos;</span><br><span class="line">    &#125;).</span><br><span class="line">    when(&apos;/three&apos;, &#123;</span><br><span class="line">        templateUrl: &apos;html/three.html&apos;</span><br><span class="line">    &#125;).</span><br><span class="line">    when(&apos;/four&apos;, &#123;</span><br><span class="line">        templateUrl: &apos;html/four.html&apos;</span><br><span class="line">    &#125;).</span><br><span class="line">    when(&apos;/five&apos;, &#123;</span><br><span class="line">        templateUrl: &apos;html/five.html&apos;</span><br><span class="line">    &#125;).</span><br><span class="line">    otherwise(&#123;</span><br><span class="line">        redirectTo: &apos;/&apos; // 重定向回到首页，可用作404页面 </span><br><span class="line">    &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h5 id="2、页面内容部分"><a href="#2、页面内容部分" class="headerlink" title="2、页面内容部分"></a>2、页面内容部分</h5><ul>
<li>此部分简单，就是通过angularjs引入本项目的其它页面，其它页面的内容就显示在这个窗口内。</li>
<li>指令：<code>ng-view</code><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">&lt;!--路由引入接口--&gt;</span><br><span class="line">&lt;div ng-view id=&quot;view&quot;&gt;&lt;/div&gt;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h5 id="3、页脚部分"><a href="#3、页脚部分" class="headerlink" title="3、页脚部分"></a>3、页脚部分</h5><ul>
<li>页脚也是挺简单的，就是一个静态的东西，不过最好使用粘性页脚。</li>
<li>什么是粘性页脚？就是Sticky footers，当页面内容较少时，不足以把页脚撑到页面底部，这就不好看了，页面内容多了自然没问题。所以就把这种当页面内容少时自动粘在底部，当页面内容多时自动往下推的布局方式叫做 Sticky footers。如下图：</li>
<li><img src="/images/web/xiaoguo.png" alt=""> <img src="/images/web/daima.png" alt=""></li>
<li>看<a href="http://www.ruanyifeng.com/blog/2015/07/flex-examples.html" target="_blank" rel="noopener">阮一峰老师的Flex布局教程-固定的底栏</a>最为详细。好了，放代码：<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 页脚部分 --&gt;</span><br><span class="line">	&lt;footer&gt;</span><br><span class="line">		&lt;div class=&quot;footer_count row&quot;&gt;</span><br><span class="line">			&lt;a href=&quot;javascript:window.open(&apos;https://tilin.gitee.io/&apos;)&quot; id=&quot;blog&quot;&gt;点击进入我的博客&lt;/a&gt;	</span><br><span class="line">			&lt;div&gt;粘性页脚。页脚随便布置了&lt;/div&gt;		</span><br><span class="line">		&lt;/div&gt;</span><br><span class="line">		&lt;div class=&quot;copyright&quot;&gt;</span><br><span class="line">			&lt;div class=&quot;row&quot;&gt;</span><br><span class="line">				&lt;ul class=&quot;col-md-12&quot;&gt;</span><br><span class="line">					&lt;li&gt;tilin原创，严谨滥用©版权所有&lt;/li&gt;</span><br><span class="line">				&lt;/ul&gt;   </span><br><span class="line">			&lt;/div&gt;</span><br><span class="line">		&lt;/div&gt;</span><br><span class="line">	&lt;/footer&gt;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h4 id="至此，内容就完了。下面是遇到的一些坑："><a href="#至此，内容就完了。下面是遇到的一些坑：" class="headerlink" title="至此，内容就完了。下面是遇到的一些坑："></a>至此，内容就完了。下面是遇到的一些坑：</h4><ul>
<li><h5 id="1、轮播左右按钮无效，而且angularjs还报错。解决如下："><a href="#1、轮播左右按钮无效，而且angularjs还报错。解决如下：" class="headerlink" title="1、轮播左右按钮无效，而且angularjs还报错。解决如下："></a>1、轮播左右按钮无效，而且angularjs还报错。解决如下：<img src="/images/web/bs1.png" alt=""></h5></li>
<li>原来是：<code>href=&quot;#carousel-example-generic&quot;</code>，就是加了<code>/</code></li>
<li><h5 id="2、如果想通过a标签跳转到非本项目的页面，像以往的这种写法-lt-a-href-quot-www-xxx-com-quot-gt-跳转到xxx-lt-a-gt-是不行的，href必须是https-www-xxx-com或http-www-xxx-com"><a href="#2、如果想通过a标签跳转到非本项目的页面，像以往的这种写法-lt-a-href-quot-www-xxx-com-quot-gt-跳转到xxx-lt-a-gt-是不行的，href必须是https-www-xxx-com或http-www-xxx-com" class="headerlink" title="2、如果想通过a标签跳转到非本项目的页面，像以往的这种写法 &lt;a href=&quot;www.xxx.com&quot; &gt;跳转到xxx&lt;/a&gt;是不行的，href必须是https://www.xxx.com或http://www.xxx.com"></a>2、如果想通过a标签跳转到非本项目的页面，像以往的这种写法 <code>&lt;a href=&quot;www.xxx.com&quot; &gt;跳转到xxx&lt;/a&gt;</code>是不行的，href必须是<code>https://www.xxx.com</code>或<code>http://www.xxx.com</code></h5></li>
<li><h5 id="3、如果打开入口文件，就是根目录下的那个index-html在页面没显示内容，浏览器还报错的，如图："><a href="#3、如果打开入口文件，就是根目录下的那个index-html在页面没显示内容，浏览器还报错的，如图：" class="headerlink" title="3、如果打开入口文件，就是根目录下的那个index.html在页面没显示内容，浏览器还报错的，如图："></a>3、如果打开入口文件，就是根目录下的那个index.html在页面没显示内容，浏览器还报错的，如图：<img src="/images/web/error.png" alt=""></h5></li>
<li>即本站点跨域了，是有点奇怪，但是吧项目放到服务器就没有问题的。解决办法如下：</li>
<li>**右键浏览器快捷键→属性，在“快捷方式”里面的“目标”加上 <code>--allow-file-access-from-files (注意最前边有一个空格)</code><img src="/images/web/c.png" alt=""></li>
<li>然后再用该浏览器打开即可，若没有出现，先复制地址栏里面的路径并关闭浏览器，然后打开该浏览器，粘贴到地址栏回车即可</li>
</ul>

    </div>
</article>


<div id="comments-template"></div>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script>
	if(!window.commentConfig) {
      window.commentConfig = {}
      window.commentConfig.title = 'AngularJs+Bootstrap搭建首页导航路由'
    }
</script>

                </div>
                <aside class="col-md-4 gal-left" id="sidebar">
    <!-- 此为sidebar的搜索框, 非搜索结果页面 -->
<aside id="sidebar-search">
    <div class="search hidden-xs" data-aos="fade-up" data-aos-duration="2000">
        <form class="form-inline clearfix" id="search-form" method="get"
              action="/search/index.html">
            <input type="text" name="s" class="form-control" id="searchInput" placeholder="搜索文章~">
            <button class="btn btn-danger btn-gal" type="submit">
                <i class="fa fa-search"></i>
            </button>
        </form>
    </div>
</aside>
    <aside id="sidebar-author">
    <div class="panel panel-gal" data-aos="flip-right" data-aos-duration="3000">
        <div class="panel-heading" style="text-align: center">
            <i class="fa fa-quote-left"></i>
            二口丝连连二口，十八相与与十八
            <i class="fa fa-quote-right"></i>
        </div>
        <div class="author-panel text-center">
            <img src="/imgs/avatar.jpg" width="140" height="140"
                 alt="个人头像" class="author-image">
            <p class="author-description"><h3 style="text-decoration:underline;"><p>一花一草一世界</p>
</h3></p>
        </div>
    </div>
</aside>
    
    <aside id="sidebar-recent_comments">
    <div class="panel panel-gal recent hidden-xs" data-aos="fade-up" data-aos-duration="2000">
        <div class="panel-heading">
            <i class="fa fa-comments"></i>
            最新评论
            <i class="fa fa-times-circle panel-remove"></i>
            <i class="fa fa-chevron-circle-up panel-toggle"></i>
        </div>
        <ul class="list-group list-group-flush"></ul>
    </div>
</aside>
    
    <!-- 要配置好leancloud才能开启此小工具 -->
    
    
    <aside id="sidebar-recent_posts">
    <div class="panel panel-gal recent hidden-xs" data-aos="fade-up" data-aos-duration="2000">
        <div class="panel-heading">
            <i class="fa fa-refresh"></i>
            近期文章
            <i class="fa fa-times-circle panel-remove"></i>
            <i class="fa fa-chevron-circle-up panel-toggle"></i>
        </div>
        <ul class="list-group list-group-flush">
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/11/14/javascript/js_copy/">JS复制选中的内容</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/11/13/audio video/mp4_play/">MP4网页播放器</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/11/13/html css/underlineStyle/">设置下划线样式</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/03/05/website/learning_website/">学习网站 学习社区</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/03/05/web/angular_upgrade/">AngularJs+Bootstrap搭建首页导航路由（升级）</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/03/05/vue/vue_cli/">Vue-cli脚手架工具搭建项目（详细）</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/03/05/web/angular/">AngularJs+Bootstrap搭建首页导航路由</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/03/05/vue/vue_babel/">Vue项目引入的一些包</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/03/05/tools/tools/">电脑实用的一些工具软件</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/03/05/plugins/cool-plugins/">炫酷特效插件</a>
                </span>
            </li>
            
        </ul>
    </div>
</aside>
    
    
    <aside id="sidebar-rand_posts">
    <div class="panel panel-gal recent hidden-xs" data-aos="fade-up" data-aos-duration="2000">
        <div class="panel-heading">
            <i class="fa fa-refresh"></i>
            随机文章
            <i class="fa fa-times-circle panel-remove"></i>
            <i class="fa fa-chevron-circle-up panel-toggle"></i>
        </div>
        <ul class="list-group list-group-flush">
            
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/03/05/audio video/mp4_attention/">MP4转码在网页播放要注意的两个坑</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/03/05/hexo/live2d/">给hexo博客增加live2d看板卡通人物动画</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/03/05/html css/base1/">HTML+CSS基础（二）</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/03/05/html css/basis/">HTML+CSS基础（一）</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/03/05/javascript/basic1/">JavaScript的一些常见基础用法（一）</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/03/05/javascript/basic3/">JavaScript的一些常见基础用法（三）</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/11/14/javascript/js_copy/">JS复制选中的内容</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/03/05/vue/vue_babel/">Vue项目引入的一些包</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/03/05/vue/vue_cli/">Vue-cli脚手架工具搭建项目（详细）</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/03/05/web/angular_upgrade/">AngularJs+Bootstrap搭建首页导航路由（升级）</a>
                </span>
            </li>
            
        </ul>
    </div>
</aside>
    
    
    <aside id="gal-sets">
        <div class="panel panel-gal hidden-xs" data-aos="fade-up" data-aos-duration="2000">
            <ul class="nav nav-pills pills-gal">
                <li class="">
                    <a href="/2019/03/05/web/angular/index.html#sidebar-tags" data-toggle="tab" id="tags-tab">热门标签</a>
                </li>
                <li class="">
                    <a href="/2019/03/05/web/angular/index.html#sidebar-friend-links" data-toggle="tab" id="friend-links-tab">友情链接</a>
                </li>
                <li class="">
                    <a href="/2019/03/05/web/angular/index.html#sidebar-links" data-toggle="tab" id="links-tab">个人链接</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="cloud-tags tab-pane nav bs-sidenav fade" id="sidebar-tags">
    
    <a href="/tags/audio-video/" style="font-size: 15.89267786050075px;" class="tag-cloud-link">audio video</a>
    
    <a href="/tags/funny/" style="font-size: 19.030792462820934px;" class="tag-cloud-link">funny</a>
    
    <a href="/tags/hexo/" style="font-size: 11.717624734097122px;" class="tag-cloud-link">hexo</a>
    
    <a href="/tags/html-css/" style="font-size: 14.255074687812897px;" class="tag-cloud-link">html css</a>
    
    <a href="/tags/markdown/" style="font-size: 13.254501429301973px;" class="tag-cloud-link">markdown</a>
    
    <a href="/tags/javascript/" style="font-size: 12.210762989187295px;" class="tag-cloud-link">javascript</a>
    
    <a href="/tags/琐记/" style="font-size: 15.464218208227097px;" class="tag-cloud-link">琐记</a>
    
    <a href="/tags/特效插件/" style="font-size: 13.79852353049285px;" class="tag-cloud-link">特效插件</a>
    
    <a href="/tags/实用插件/" style="font-size: 12.552164347340685px;" class="tag-cloud-link">实用插件</a>
    
    <a href="/tags/vue/" style="font-size: 18.124683573747514px;" class="tag-cloud-link">vue</a>
    
    <a href="/tags/tools/" style="font-size: 12.018192131181143px;" class="tag-cloud-link">tools</a>
    
    <a href="/tags/web/" style="font-size: 17.993020069296826px;" class="tag-cloud-link">web</a>
    
    <a href="/tags/学习网站-学习社区/" style="font-size: 11.874321204752222px;" class="tag-cloud-link">学习网站 学习社区</a>
    
</div>
                <div class="friend-links tab-pane nav bs-sidenav fade" id="sidebar-friend-links">
    
    <li>
        <a href="https://hexo.io/zh-cn/" target="_blank">Hexo</a>
    </li>
    
    <li>
        <a href="https://www.npmjs.com/" target="_blank">npm</a>
    </li>
    
    <li>
        <a href="https://user.qzone.qq.com/3287108795?source=namecardhoverqzone" target="_blank">个人空间（非好友可能看不了）</a>
    </li>
    
</div>
                <div class="links tab-pane nav bs-sidenav fade" id="sidebar-links">
    
    <li>
        <a href="https://github.com/tianrenlin/" target="_blank">Github</a>
    </li>
    
    <li>
        <a href="https://gitee.com/tilin" target="_blank">Gitee（码云）</a>
    </li>
    
    <li>
        <a href="https://segmentfault.com/u/tianlin" target="_blank">SegmentFault（思否）</a>
    </li>
    
</div>
            </div>
        </div>
    </aside>
    
</aside>
            </div>
        </div>
    </div>
    <footer id="gal-footer">
    <div class="container">
        Copyright © 2018 <a href="https://tilin.gitee.io/about/" style="color:#39C1D8;">Tlin</a> Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>.&nbsp;
    </div>
</footer>

<!-- 回到顶端 -->
<div id="gal-gotop" title="回到顶部">
    <i class="fa fa-angle-up"></i>
</div>
<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":null,"use":"live2d-widget-model-z16","mobile":{"show":false},"dialog":{"enable":true},"log":false});</script></body>
<script src="/js/activate-power-mode.js"></script>
<script>

    // 配置highslide
	hs.graphicsDir = '/js/highslide/graphics/'
    hs.outlineType = "rounded-white";
    hs.dimmingOpacity = 0.8;
    hs.outlineWhileAnimating = true;
    hs.showCredits = false;
    hs.captionEval = "this.thumb.alt";
    hs.numberPosition = "caption";
    hs.align = "center";
    hs.transitions = ["expand", "crossfade"];
    hs.lang.number = '共%2张图, 当前是第%1张';
    hs.addSlideshow({
      interval: 5000,
      repeat: true,
      useControls: true,
      fixedControls: "fit",
      overlayOptions: {
        opacity: 0.75,
        position: "bottom center",
        hideOnMouseOut: true
      }
    })

    // 初始化aos
    AOS.init({
      duration: 1000,
      delay: 0,
      easing: 'ease-out-back'
    });

</script>
<script>
	POWERMODE.colorful = 'true';    // make power mode colorful
	POWERMODE.shake = 'true';       // turn off shake
	// TODO 这里根据具体情况修改
	document.body.addEventListener('input', POWERMODE);
</script>
<script>
    window.slideConfig = {
      prefix: '/imgs/slide/background',
      ext: 'jpg',
      maxCount: '6'
    }
</script>
<script src="/js/hs.js"></script>
<script src="/js/blog.js"></script>

<script src="/js/oni.js"></script>



<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
    if(window.commentConfig) {
      window.commentConfig.id = 'Tue Mar 05 2019 23:00:21 GMT+0800'
      window.commentConfig.owner = 'tianrenlin'
      window.commentConfig.repo = 'tilin_comments'
      window.commentConfig.client_id = 'a1c64988f8052e784d45'
      window.commentConfig.client_secret = 'a7eb4fff9e6c2d418ae487de38e3153bfe17c06c'
      window.commentConfig.redirect_uri = ''
    } else {
      window.commentConfig = {
      	id: 'Tue Mar 05 2019 23:00:21 GMT+0800',
        owner: 'tianrenlin',
        repo: 'tilin_comments',
        client_id: 'a1c64988f8052e784d45',
        client_secret: 'a7eb4fff9e6c2d418ae487de38e3153bfe17c06c',
        redirect_uri: ''
      }
    }
</script>
<script src="/js/comment/gitment.js"></script>

</html>
<script>
    !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
</script>